﻿@{ Layout = "../Shared/_Layout.cshtml"; }

<div class="card-box">
  <div class="m-t-0 header-title">
    创建新站点
  </div>

  <template v-if="pageType == 'selectType'">
    <p class="text-muted m-b-30 font-14">
      欢迎使用创建新站点向导，请选择创建站点的方式
    </p>

    <button v-on:click="btnCreateClick('empty')" type="button" class="btn btn-block btn-md btn-outline-primary">创建空站点</button>
    <p class="text-muted mt-2 mb-4 font-13">
      点击按钮创建空站点，站点的栏目、内容及模板需要手动添加。
    </p>
    <button v-on:click="btnLocalClick()" v-if="siteTemplates && siteTemplates.length > 0" type="button" class="btn btn-block btn-md btn-outline-primary">使用本地站点模板创建站点</button>
    <p v-if="siteTemplates && siteTemplates.length > 0" class="text-muted mt-2 mb-4 font-13">
      点击按钮从本地站点模板中选择并创建站点。
    </p>
    <button v-on:click="btnCloudClick()" type="button" class="btn btn-block btn-md btn-outline-primary">使用在线站点模板创建站点</button>
    <p class="text-muted mt-2 mb-4 font-13">
      点击按钮从<a href="https://www.siteserver.cn/templates/" target="_blank">官网模板中心</a>中选择并创建站点。
    </p>
  </template>

  <template v-else-if="pageType == 'selectLocal'">
    <p class="text-muted m-b-30 font-14">
      选中站点模板后点击创建站点按钮开始创建站点。
    </p>

    <div class="panel panel-default">
      <div class="panel-body p-0">
        <div class="table-responsive">
          <table class="table tablesaw table-hover m-0">
            <thead>
              <tr class="thead">
                <th>站点模板名称</th>
                <th>站点模板文件夹</th>
                <th>站点模板介绍</th>
                <th class="text-center"></th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="siteTemplate in siteTemplates">
                <td>
                  {{ siteTemplate.siteTemplateName }}
                </td>
                <td>
                  {{ siteTemplate.directoryName }}
                </td>
                <td>
                  {{ siteTemplate.description }}
                </td>
                <td>
                  <a v-on:click="btnCreateClick('local', siteTemplate.directoryName)" href="javascript:;" class="btn btn-primary">创建站点</a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </template>

  <template v-else-if="pageType == 'selectCloud'">
    <p class="text-muted m-b-30 font-14">
      选中站点模板后点击创建站点按钮开始创建站点。
    </p>

    <div class="row">
      <div class="col-8">
        <div class="form-inline">
          <input v-model="word" type="text" style="width: 80%" class="form-control" placeholder="请输入关键字...">
          <a :href="getUrl(page, word, tag, price, order)" class="btn btn-primary ml-1">搜索</a>
        </div>
      </div>
      <div class="col-4 text-right">
        <a class="text-primary mr-2" target="_blank" href="https://www.siteserver.cn/templates/">官网模板中心</a>
      </div>
    </div>

    <div class="row mt-4">
      <div class="col-6">

        <div class="portfolioFilter">
          <a :href="getTagUrl('')" :class="{'current' : !tag}">全部</a>
          <a v-for="tagName in allTagNames" :href="getTagUrl(tagName)" :class="{'current' : tag == tagName}">
            {{ tagName }}
          </a>
        </div>

      </div>
      <div class="col-6">
        <form class="form-inline float-right">
          <div class="form-group ml-3">
            价格：
            <select v-on:change="priceChanged" v-model="price" class="form-control form-control-sm">
              <option value="">全部</option>
              <option value="false">免费模板</option>
              <option value="true">收费模板</option>
            </select>
          </div>
          <div class="form-group ml-3">
            排序：
            <select v-on:change="orderChanged" v-model="order" class="form-control form-control-sm">
              <option value="">默认</option>
              <option value="UpdatedDate">更新时间</option>
              <option value="AddDate">上传时间</option>
              <option value="Price">价格</option>
            </select>
          </div>
        </form>
      </div>

    </div>

    <div class="row mt-4"></div>

    <div class="port mb-4">
      <div class="portfolioContainer row">

        <div v-for="templateInfo in templateInfoList" class="col-sm-6 col-lg-3 col-md-4">
          <div class="gal-detail thumb">
            <a :href="getDisplayUrl(templateInfo.templateId)" class="image-popup" target="_blank">
              <img :src="getTemplateUrl(templateInfo.imageUrl)" class="thumb-img" style="max-height: 400px;">
            </a>
            <h4 class="text-center">{{ templateInfo.templateId }}</h4>
            <div class="ga-border"></div>
            <p class="text-muted text-center" style="max-height: 45px;overflow: hidden;">
              <small>{{ templateInfo.description }}</small>
            </p>
            <div class="text-center">
              <a :href="getPreviewUrl(templateInfo.templateId)" target="_blank" class="btn btn-info mr-2">预览站点</a>
              <a v-on:click="btnCreateClick('cloud', templateInfo.templateId)" href="javascript:;" class="btn btn-primary">创建站点</a>
            </div>
          </div>
        </div>

      </div>
    </div>

    <hr />

    <nav v-if="pages > 1">
      <ul class="pagination justify-content-center">
        <li class="page-item">
          <a :href="getPageUrl(page - 1)" class="page-link">
            <span aria-hidden="true">上一页</span>
          </a>
        </li>
        <li v-for="i of pages" :class="{'active': i === page}" class="page-item">
          <a :href="getPageUrl(i)" class="page-link" v-html="i"></a>
        </li>
        <li class="page-item">
          <a :href="getPageUrl(page + 1)" class="page-link">
            <span aria-hidden="true">下一页</span>
          </a>
        </li>
      </ul>
    </nav>
  </template>

  <template v-else-if="pageType == 'create'">
    <p class="text-muted font-13 m-b-25" v-html="getCreateType()"></p>

    <div class="form-group">
      <label>
        站点名称
        <small v-show="errors.has('siteName')" class="text-danger">{{ errors.first('siteName') }}</small>
      </label>
      <input v-model="siteName" name="siteName" data-vv-as="站点名称" v-validate="'required'" :class="{'is-invalid': errors.has('siteName') }" type="text" class="form-control">
    </div>

    <div v-if="!isRootExists" class="form-group">
      <label>
        站点级别
      </label>
      <div class="m-2">
        <div class="radio radio-primary form-check-inline">
          <input v-model="isRoot" type="radio" id="isRoot_true" :value="true" name="isRoot">
          <label for="isRoot_true"> 主站 </label>
        </div>
        <div class="radio radio-primary form-check-inline">
          <input v-model="isRoot" type="radio" id="isRoot_false" :value="false" name="isRoot">
          <label for="isRoot_false"> 子站 </label>
        </div>
      </div>
    </div>

    <div v-if="!isRootExists && !isRoot" class="form-group">
      <label>
        上级站点
      </label>
      <select v-model="parentId" class="form-control">
        <option v-for="site in siteList" :value="site.key">{{ site.value }}</option>
      </select>
    </div>

    <div v-if="!isRoot" class="form-group">
      <label>
        文件夹名称
        <small v-show="errors.has('siteDir')" class="text-danger">{{ errors.first('siteDir') }}</small>
      </label>
      <input v-model="siteDir" name="siteDir" data-vv-as="文件夹名称" v-validate="'required'" :class="{'is-invalid': errors.has('siteDir') }" type="text" class="form-control">
      <small class="form-text text-muted">实际在服务器中保存此网站的文件夹名称，此路径必须以英文或拼音命名</small>
    </div>

    <div class="form-group">
      <label>
        内容表
        <small v-show="errors.has('tableChoose')" class="text-danger">{{ errors.first('tableChoose') }}</small>
        <small v-show="errors.has('tableHandWrite')" class="text-danger">{{ errors.first('tableHandWrite') }}</small>
      </label>
      <div class="m-2">
        <div class="radio radio-primary form-check-inline">
          <input v-model="tableRule" type="radio" id="tableRule_Choose" value="Choose" name="tableRule">
          <label for="tableRule_Choose"> 选择内容表 </label>
        </div>
        <div class="radio radio-primary form-check-inline">
          <input v-model="tableRule" type="radio" id="tableRule_Create" value="Create" name="tableRule">
          <label for="tableRule_Create"> 创建新的内容表 </label>
        </div>
        <div class="radio radio-primary form-check-inline">
          <input v-model="tableRule" type="radio" id="tableRule_HandWrite" value="HandWrite" name="tableRule">
          <label for="tableRule_HandWrite"> 指定内容表 </label>
        </div>
      </div>
      <template v-if="tableRule == 'Choose'">
        <select v-model="tableChoose" name="tableChoose" data-vv-as="内容表" v-validate="'required'" :class="{'is-invalid': errors.has('tableChoose') }" class="form-control">
          <option v-for="tableName in tableNameList" :value="tableName">{{ tableName }}</option>
        </select>
        <small class="form-text text-muted">请选择已存在的内容表。</small>
      </template>
      <template v-else-if="tableRule == 'Create'">
        <small class="form-text text-muted">系统将创建内容表，表名称为<code>siteserver_Content_&lt;站点Id&gt;</code>。</small>
      </template>
      <template v-else-if="tableRule == 'HandWrite'">
        <input v-model="tableHandWrite" name="tableHandWrite" data-vv-as="内容表" v-validate="'required'" :class="{'is-invalid': errors.has('tableHandWrite') }" type="text" class="form-control">
        <small class="form-text text-muted">请输入内容表名称，系统将检测数据库是否已存在指定的内容表，如果不存在系统将创建此内容表。</small>
      </template>
    </div>

    <div v-if="createType == 'local' || createType == 'cloud'" class="form-group">
      <label>
        站点模板导入选项
      </label>
      <div class="m-2">
        <div class="checkbox checkbox-primary form-check-inline">
          <input v-model="isImportContents" type="checkbox" id="isImportContents" name="isImportContents">
          <label for="isImportContents"> 导入栏目及内容 </label>
        </div>
        <div class="checkbox checkbox-primary form-check-inline">
          <input v-model="isImportTableStyles" type="checkbox" id="isImportTableStyles" name="isImportTableStyles">
          <label for="isImportTableStyles"> 导入表虚拟字段 </label>
        </div>
      </div>
    </div>

    <hr>

    <div class="text-center">
      <button v-on:click="btnSubmitClick" type="button" class="btn btn-primary">创建站点</button>
    </div>
  </template>

</div>

@section Scripts{
<script src="siteAdd.js" type="text/javascript"></script> }